{% stylesheet %}
    .block_image2 .block_image2_content {
        display: flex;
        margin: 0 auto;
        flex-wrap: wrap;
        grid-column-gap: var(--column-gutter);
        box-sizing: border-box;
    }
    .block_image2 .block_image2_content .image-two-item {
        flex: 1;
        position: relative;
    }

    .block_image2 .block_image2_content .image-two-item img {
        width: 100%;
        height: auto;
    }
    .block_image2 .block_image2_content .image-two-item .default_image_number{
        font-size:18px;
        color:#999;
        position: absolute;
        right:20px;
        bottom:14px;
    }




    .block_image2 .block_image2_content .image-two-item .block_image2_text{
        position: absolute;
        left: 0;
        bottom: 20px;
        width: 100%;
        text-align: center;
        padding: 0 20px;
        box-sizing: border-box;
        color: #fff;
    }
    .block_image2 .block_image2_content .image-two-item .block_image2_title{
        font-size: var(--title_font_size);
        font-family: var(--title_font_family);
        font-style: var(--title_font_style);
        font-weight: var(--title_font_weigth);
        line-height: 1;
    }
    .block_image2 .block_image2_content .image-two-item .block_image2_detail{
        margin-top:15px;
    }
    .block_image2 .block_image2_content .image-two-item .block_image2_btn{
        display: inline-flex;
        margin-top: 10px;
        width: auto;
    }


    @media screen and (max-width: 767px) {
    .block_image2 .block_image2_content .image-two-item .default_image_number{
        right:8px;
        bottom:5px;
        font-size:14px;
    }
    .block_image2 .block_title{
       padding:0 15px;
    }
    .block_image2 .block_image2_content .image-two-item {
        flex: none;
        width: 100%;
        margin-bottom: {{section.settings.spacing}}px;
    }
    .block_image2 .full_container_wrapper{
        padding-left:0px;
        padding-right:0px;
    }
    
}


{% endstylesheet %}
<div class="block_image2">
    <div class="{% if section.settings.is_width_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_image2_content" style="--column-gutter:{{section.settings.spacing}}px">
            {% for block in section.blocks %}
            <a href="{% if block.image_link.url %}{{ block.image_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" data-tips="请选择图片链接" class="image-two-item">
                <img data-src="{{ block.image.src }}"  src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ block.image.alt }}" >
                {% if block.image.src =='' %} 
               <span class="default_image_number">Image-{{forloop.index}}</span>
                {% endif %} 


                {% if block.image_title != "" or block.image_detail != "" or block.image_btn != "" %}
                <div class="block_image2_text" style="color: {{ block.text_color }};">
                    {% if block.image_title != "" %}<div class="block_image2_title">{{ block.image_title }}</div>{% endif %}
                    {% if block.image_detail != "" %}<div class="block_image2_detail">{{ block.image_detail }}</div>{% endif %}
                    {% if block.image_btn != "" %}<div class="block_image2_btn main_btn" style="background-color: {{ block.btn_bg }};color: {{ block.btn_color }};">{{ block.image_btn }}</div>{% endif %}
                </div>
                {% endif %}




            </a>
            {% endfor %}
        </div>
    </div>
</div>
{% schema %}
{
    "tag": "image2",
    "class": "block_image2",
    "is_global": false,
    "name": {
        "zh_CN": "单排图片"
    },
    "max_blocks": "5",
    "settings": [
    {
        "type": "card_header",
        "label": {
            "zh_CN": "设置"
        }
    },
    {
        "type": "card_input",
        "label": {
            "zh_CN": "标题"
        },
        "id": "title"
    },  
    {
        "type": "card_text_editor",
        "label": {
            "zh_CN": "简短描述"
        },
        "id": "detail"
    },
    {
        "type": "card_switch",
        "label": {
            "zh_CN": "宽度铺满"
        },
        "id": "is_width_fill"
    },
    {
        "type": "card_input_number",
        "id": "spacing",
        "max": 200,
        "min": 0,
        "label":
        {
            "en_US": "Block spacing",
            "zh_CN": "间距"
        },
        "info":
        {
            "zh_CN": "内容宽度单位为px"
        }
    },
    {
        "type": "card_header",
        "label": {
            "zh_CN": "内容"
        }
    }
  ],
  "blocks": [
    {
        "name": {
            "zh_CN": "图片"
        },
        "type": "image-item",
        "settings": [
        {
        "type": "card_image",
        "label": {
            "zh_CN": "图片"
        },
        "default": {
            "src": "",
            "alt": ""
        },
        "info": {
            "zh_CN": "建议宽度1000px以上，高度自适应"
        },
        "id": "image"
    },
    {
        "type": "card_page_link",
        "label": {
            "zh_CN": "链接"
        },
        "default": {
            "type": "",
            "title": "",
            "url": ""
        },
        "id": "image_link"
    },
    {
        "type": "card_input",
        "label": {
            "zh_CN": "标题"
        },
        "id": "image_title",
        "default":""
    },  
    {
        "type": "card_text_editor",
        "label": {
            "zh_CN": "描述"
        },
        "id": "image_detail",
        "default":"Pair large text with a full-width image."
    },
    {
        "type": "card_input",
        "label": {
            "zh_CN": "按钮文案"
        },
        "id": "image_btn",
        "default":"Shop now"
    },
    {
        "type": "card_color",
        "label": {
            "zh_CN": "文本颜色"
        },
        "id": "text_color",
        "default": "#fff"
    },
    {
        "type": "card_color",
        "label": {
            "zh_CN": "按钮背景"
        },
        "id": "btn_bg",
        "default": "#fff"
    },
    {
        "type": "card_color",
        "label": {
            "zh_CN": "按钮颜色"
        },
        "id": "btn_color",
        "default": "#000"
    }
    ]}
    
  ],
  "default": {
    "settings": {
      "title":"Figure 2",
      "is_width_fill": false,
      "spacing":30,
      "padding":{
        "top": "20",
            "left": "0",
            "right": "0",
            "bottom": "20"
      }
    },
    "blocks": [
    {
        "block_type": "image-item",
        "image":{
            "src": "",
            "alt": ""
        },
        "image_link":{
            "type": "",
            "title": "",
            "url": ""
        },
        "image_title":"",
        "image_detail":"Pair large text with a full-width image.",
        "image_btn":"Shop now",
        "text_color":"#fff",
        "btn_bg":"#fff",
        "btn_color":"#000"
    },
    {
        "block_type": "image-item",
        "image":{
            "src": "",
            "alt": ""
        },
        "image_link":{
            "type": "",
            "title": "",
            "url": ""
        },
        "image_title":"",
        "image_detail":"Pair large text with a full-width image.",
        "image_btn":"Shop now",
        "text_color":"#fff",
        "btn_bg":"#fff",
        "btn_color":"#000"
    }]
  }
}
{% endschema %}